﻿@page "/components/autocomplete"


<DocsPage>
    <DocsPageHeader Title="Autocomplete"
        SubTitle="The Autocomplete component offers simple and flexible type-ahead functionality.">
        <Description>
            It is great for searching a value from a long list of options. In comparison to a Select, the Autocomplete doesn't need to know the complete item list, 
            it only calls a search function which will return matching items. The search function can even run asynchronously, i.e. for database queries.
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Usage">
                <Description>
                    How you write the search function determines whether or not the Autocomplete shows a full list initially. By setting <CodeInline>ResetValueOnEmptyText="true"</CodeInline>,
                    the <CodeInline>Value</CodeInline> will be reset when the user clears the input text. With <CodeInline>CoerceText="true"</CodeInline> upon selection of an entry from the list,
                    the <CodeInline>Text</CodeInline> is always updated. When the user types something that is not on the list and <CodeInline>CoerceValue</CodeInline> is true,
                    the <CodeInline>Value</CodeInline> will be overwritten with the user input which allows it to be passed to the validation function.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="AutocompleteUsageExample">
                <AutocompleteUsageExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Margin And Dense">
                <Description>While the margin property affects the input element, the dense property affects the dropdown element.</Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="AutocompleteMarginDenseExample">
                <AutocompleteMarginDenseExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Presentation">
                <Description>
                    When you use objects, Autocomplete uses <CodeInline>ToString()</CodeInline> to convert the object into text form. You can set a custom <CodeInline>ToStringFunc</CodeInline>
                    to override how the list items are stringified. This string representation is also what you'll get as input to the search function.<br />
                    If that is not enough, you can define an <CodeInline Tag="true">ItemTemplate</CodeInline> and even an <CodeInline Tag="true">ItemSelectedTemplate</CodeInline>
                    to create highly sophisticated list item presentations.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="AutocompleteClrObjectsExample">
                <AutocompleteClrObjectsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Validation">
                <Description>
                    Below there are different examples of validation with the MudAutocomplete control. The validation uses an EditForm or a MudForm. The result and display will vary if the
                    <CodeInline Tag="true">CoerceValue</CodeInline> option is set to <CodeInline Tag="true">true</CodeInline>. But also if characters are typed into the control instead of a selection from the dropdown list.<br />
                    For more info on form validation, check out <MudLink Href="/components/form">Form</MudLink>.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="AutocompleteValidationExample">
                <AutocompleteValidationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Keyboard Navigation">
                <Description>
                    <MudText>MudAutocomplete accepts keys to keyboard navigation.</MudText>
                    <br />
                    <MudText><CodeInline>Escape</CodeInline> or <CodeInline>Alt+ArrowUp</CodeInline> keys to close dropdown</MudText>
                    <MudText><CodeInline>Enter</CodeInline> or <CodeInline>NumpadEnter</CodeInline> or <CodeInline>ArrowDown</CodeInline> or <CodeInline>ArrowUp</CodeInline> keys to open dropdown</MudText>
                    <MudText><CodeInline>ArrowUp</CodeInline> key to select/navigate previous item</MudText>
                    <MudText><CodeInline>ArrowDown</CodeInline> key to select/navigate next item</MudText>
                    <MudText><CodeInline>Enter</CodeInline> or <CodeInline>NumpadEnter</CodeInline> keys to select item</MudText>
                    <br />
                    <MudText>*If search func didn't return any value, keys can't open the dropdown.</MudText>
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="AutocompleteUsageExample">
                <AutocompleteUsageExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>

